<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息管理</title>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/js/easyui-lang-zh_CN.js"></script>
    <link href="/static/css/themes/default/easyui.css" rel="stylesheet" />
    <link href="/static/css/themes/icon.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            $("#addDiv").css("display","none");
            $("#setRoleDiv").css("display","none");
            $("#setActionDiv").css("display","none");
            $("#btnSearch").click(function () {
                var pars = {
                    name:$("#txtSearchUName").val(),
                    remark:$("#txtSearchRemark").val(),
                }
                loadData(pars);
            })
            loadData()
        })
        function loadData(pars) {
            $('#tt').datagrid({
                url: '/Admin/UserInfo/GetUserInfo',
                title: '用户数据表格',
                width: 700,
                height: 400,
                fitColumns: true, //列自适应
                nowrap: false,//设置为true，当数据长度超出列宽时将会自动截取
                idField: 'Id',//主键列的列明
                loadMsg: '正在加载用户的信息...',
                pagination: true,//是否有分页
                singleSelect: false,//是否单行选择
                pageSize:10,//默认页大小，一页多少条数据
                pageNumber: 1,//当前页，默认的
                pageList: [5, 10, 20],
                queryParams: pars,//往后台传递参数
                columns: [[
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },
                    { field: 'Id', title: '编号', width: 80 },
                    { field: 'UserName', title: '姓名', width: 120 },
                    { field: 'UserPwd', title: '密码', width: 120 },
                    { field: 'Remark', title: '备注', width: 120 },
                    { field: 'AddDate', title: '时间', width: 80, align: 'left',
                        formatter: function (value, row, index) {
                            return value.split('T')[0]//对日期时间的处理
                        }
                    }
                ]],
                toolbar: [
                    {
                    id: 'btnDelete',
                    text: '删除',//显示的文本
                    iconCls: 'icon-remove', //采用的样式
                    handler: function () {
                        DeleteUser();
                        }
                    },
                    {
                        id: 'btnAdd',
                        text: '添加',//显示的文本
                        iconCls: 'icon-add', //采用的样式
                        handler: function () {	//当单击按钮时执行该方法
                            ShowAddUser();
                        }
                    },
                    {
                        id: 'btnEdit',
                        text: '修改',//显示的文本
                        iconCls: 'icon-edit', //采用的样式
                        handler: function () {//当单击按钮时执行该方法
                            // var checkPower =$("#checkPower").val();
                            // if (checkPower!=1){
                            //     $.messager.alert("警告","无权限访问！","error");
                            //     $("#checkPower").attr("value",0);
                            // }else {
                                ShowSetUser();
                            // }
                        }
                    },
                    {
                        id: "btnSetUserRole",
                        text: "用户角色管理",
                        iconCls: 'icon-edit',
                        handler: function () {
                            ShowSetRole();
                        }
                    },
                    {
                        id: "btnSetUserAction",
                        text: "用户权限管理",
                        iconCls: 'icon-edit',
                        handler: function () {
                            ShowSetAction();
                        }
                    },

                ],
            });
        }
        function DeleteUser() {
            //当单击按钮时执行该方法
            //获取在表格中选中的行（getSelections：表示获取选中的行）
            // var rows = $('#tt').datagrid('getSelections');
            var rows = $('#tt').datagrid('getSelections');
            // console.log(rows);终极大坑，此处rows不显示为正常
            if (!rows || rows.length == 0) {//判断是否选择了，如果没有选择长度为0
                $.messager.alert("提醒", "请选择要删除的记录!", "error");
                return;
            }
            $.messager.confirm("提示","确定要删除么？",function (r) {
                if (r) {
                    var userId = "";
                    for (var i = 0;i<rows.length;i++){
                        userId = userId + rows[i].Id + ",";//被坑处01:id大写
                    }
                    userId=userId.substr(0,userId.length-1);
                    $.post("/Admin/UserInfo/DeleteUser",{"id":userId},function (data) {
                        //服务端处理完成后，会将结果返回到客户端，在这里进行判断，如果服务端处理成功
                        //给出相应的提示，并且重新加载表格。
                        if (data.flag=="ok"){
                            $.messager.alert("提示","数据删除成功!!","info");
                            $("#tt").datagrid('reload');
                            $('#tt').datagrid('clearSelections');//清除原来以前选中的数据
                        }else{
                            $.messager.alert("提示","数据删除出现错误!!","error")
                        }
                    })
                }
            });
        }
        function ShowAddUser() {
            $("#addDiv").css("display", "block");
            $('#addDiv').dialog({
                title: '添加用户信息',
                width: 240,
                height: 260,
                collapsible: true, //可折叠
                maximizable: true, //最大化
                resizable: true,//可缩放
                modal: true,//模态，表示只有将该窗口关闭才能修改页面中其它内容
                buttons: [{ //按钮组
                    text: 'Ok',//按钮上的文字
                    iconCls: 'icon-ok',
                    handler: function () {
                        //提交表单。
                        AddUserData();
                    }
                }, {
                    text: 'Cancel',
                    handler: function () {
                        $('#addDiv').dialog('close');
                    }
                }]
            });
        }
        function AddUserData() {
            //1：获取表单中的数据
            var pars= $("#addForm").serializeArray()
            //2:发送数据
            $.post("/Admin/UserInfo/AddUser",pars,function (data) {
                //判断服务端返回的数据。
                if (data.flag=="ok"){
                    $.messager.alert("提示","用户信息添加成功!!","info");
                    $('#addDiv').dialog('close');
                    $("#addForm input").val("")//将form中的所有的input标签赋空值。
                    $('#tt').datagrid('reload');
                }else{
                    $.messager.alert("提示","用户信息添加失败!!","error");
                }
            })
        }
        function ShowSetUser() {

            var user = $('#tt').datagrid('getSelections');
            if (!user||user.length==0){
                $.messager.alert("提醒", "请选择要修改信息的用户!", "error");
                return
            }else if (user.length!=1){
                $.messager.alert("提醒", "一次只能修改一条用户数据!", "error");
                return
            }
            var userId = user[0].Id;

            $("#addDiv").css("display", "block");
            $('#addDiv').dialog({
                title: '编辑用户信息',
                width: 240,
                height: 260,
                collapsible: true, //可折叠
                maximizable: true, //最大化
                resizable: true,//可缩放
                modal: true,//模态，表示只有将该窗口关闭才能修改页面中其它内容
                buttons: [{ //按钮组
                    text: 'Ok',//按钮上的文字
                    iconCls: 'icon-ok',
                    handler: function () {
                        //提交表单。
                        EditUserData(userId);
                    }
                }, {
                    text: 'Cancel',
                    handler: function () {
                        $('#addDiv').dialog('close');
                    }
                }]
            });
        }
        function EditUserData(userId) {
            var pars= $("#addForm").serializeArray()//获取表单中的数据
            pars.push({name:"id",value:userId});
            // name: "Remark"
            // value: "111"
            // console.log(pars);
            $.post("/Admin/UserInfo/EditUser",pars,function(data) {
                //判断服务端返回的数据。
                if (data.flag=="ok"){
                    $.messager.alert("提示","用户信息修改成功!!","info");
                    $('#addDiv').dialog('close');
                    $("#addForm input").val("")//将form中的所有的input标签赋空值。
                    $('#tt').datagrid('reload');
                    $('#tt').datagrid('clearSelections');//清除原来以前选中的数据
                }else{
                    $.messager.alert("提示","用户信息修改失败!!","error");
                }
            })
        }
        function ShowSetRole() {
            var rows = $('#tt').datagrid('getSelections');
            if (!rows||rows.length==0){
                $.messager.alert("提醒", "请选择要修改角色的用户!", "error");
                return
            }else if (rows.length != 1) {//判断是否选择了，如果没有选择长度为0
                $.messager.alert("提醒", "一次只能修改一条用户数据!", "error");
                return;
            }

            $("#setUserRoleFrame").attr("src","/Admin/UserInfo/ShowSetUserRole?id="+rows[0].Id);
            $("#setRoleDiv").css("display", "block");
            $('#setRoleDiv').dialog({
                title: '用户角色管理',
                width: 380,
                height: 360,
                collapsible: true, //可折叠
                maximizable: true, //最大化
                resizable: true,//可缩放
                modal: true,//模态，表示只有将该窗口关闭才能修改页面中其它内容
                buttons: [{ //按钮组
                    text: 'Ok',//按钮上的文字
                    iconCls: 'icon-ok',
                    handler: function () {
                        //调用子页面中的submit
                        var childWindow = $("#setUserRoleFrame")[0].contentWindow;
                        childWindow.subForm();
                    }
                }, {
                    text: 'Cancel',
                    handler: function () {
                        $('#setRoleDiv').dialog('close');
                    }
                }]
            });
        }
        function AfterRoleEdit(data) {
            if(data.flag=="ok"){
                $.messager.alert("提示","用户角色信息修改成功!!","info");
                $('#setRoleDiv').dialog('close');
                $('#tt').datagrid('reload');
            }else{
                $.messager.alert("提示","角色信息添加失败!!","error");
            }

        }
        function ShowSetAction() {
            // console.log(data);
            var rows = $('#tt').datagrid('getSelections');
            if (!rows||rows.length==0){
                $.messager.alert("提醒", "请选择要修改权限的用户!", "error");
                return
            }else if(rows.length!=1){
                $.messager.alert("提示","一次只能修改一条用户数据!","error");
                return;
            }
            $("#setUserActionFrame").attr("src","/Admin/UserInfo/ShowUserAction?userId="+rows[0].Id);
            $("#setActionDiv").css("display","block");
            $('#setActionDiv').dialog({
                title: '为用户分配权限',
                width: 700,
                height: 500,
                collapsible: true,
                maximizable: true,
                resizable: true,
                modal: true,
                buttons: [{
                    text: 'Ok',
                    iconCls: 'icon-ok',
                    handler: function () {
                        $('#setActionDiv').dialog('close');
                    }
                }, {
                    text: 'Cancel',
                    handler: function () {
                        $('#setActionDiv').dialog('close');
                    }
                }]
            });
        }
    </script>
</head>
<body>
{{/*<div id="checkPower" type="hidden" value={{.checkPower}}></div>*/}}
<div id="setRoleDiv">
    <iframe id="setUserRoleFrame" frameborder="0" width="100%" height="100%"></iframe>
</div>
<div id="setActionDiv">
    <iframe id="setUserActionFrame" frameborder="0" width="100%" height="100%"></iframe>
</div>
<div id="searchDiv">
    用户名:<input type="text" id="txtSearchUName" />&nbsp;&nbsp;
    备注:<input type="text" id="txtSearchRemark" />
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px" id="btnSearch">Search</a>
</div>
<div id="showDiv">
    <table id="tt" style="width: 700px;" title="标题，可以使用代码进行初始化，也可以使用这种属性的方式" iconcls="icon-edit">
</table>
</div>
<div id="addDiv">
    <form id="addForm">
        <table>
            <tr><td>用户名:</td><td><input type="text" name="UserName"></td></tr>
            <tr><td>密码:</td><td><input type="password" name="UserPwd"></td></tr>
            <tr><td>备注:</td><td><input type="text" name="Remark"> </td></tr>
        </table>
    </form>
</div>
</body>
</html>